// ===============================
// ComputeService 模块专属样式 - 现代化设计风格
// ===============================

// ===============================
// ComputeService 特有的服务展示样式
// ===============================

.compute-service {
	// ComputeService 特有的容器样式
	p {
		margin-bottom: 10px !important;
	}

	.features-container {
		display: flex;
		flex-direction: column;
		.feature {
			margin-bottom: 4px !important;
			.icon {
				font-size: 1.2rem;
			}

			span:not(.icon) {
				color: var(--theme-content-text);
				font-weight: 500;
				font-size: 14px;
			}

			&:hover span:not(.icon) {
				color: white;
			}
		}
	}
}

// ===============================
// 服务项目展示样式
// ===============================

.service-item {
	display: flex;
	align-items: center;
	gap: 50px;
	margin-bottom: 80px;
	padding: 40px 0;
	border-radius: 20px;
	transition: all 0.3s ease;

	&:nth-child(even) {
		flex-direction: row-reverse;
	}

	&:hover {
		transform: translateY(-5px);
	}

	.service-image-placeholder {
		flex: 1;
		max-width: 500px;
		width: 100%;
		height: 350px;
		object-fit: cover;
		border-radius: 16px;
		box-shadow: var(--theme-image-shadow);
		transition: all 0.3s ease;

		&:hover {
			transform: scale(1.02);
			box-shadow: var(--theme-card-shadow-hover);
		}
	}

	.service-text {
		flex: 1;
		min-width: 0;

		h3 {
			font-size: 2rem;
			font-weight: 700;
			color: var(--theme-content-title);
			margin-bottom: 20px;
			background: var(--theme-gradient-title);
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
			background-clip: text;
		}

		p {
			font-size: 1.1rem;
			line-height: 1.8;
			color: var(--theme-content-text);
			margin-bottom: 30px;
		}

		ul {
			list-style: none;
			padding: 0;
			margin: 0;

			li {
				position: relative;
				padding: 12px 0 12px 30px;
				font-size: 1rem;
				line-height: 1.6;
				color: var(--theme-content-text);
				transition: all 0.3s ease;

				&:before {
					content: '';
					position: absolute;
					left: 0;
					top: 50%;
					transform: translateY(-50%);
					width: 6px;
					height: 6px;
					background: var(--theme-accent);
					border-radius: 50%;
				}

				&:hover {
					color: var(--theme-accent);
					transform: translateX(5px);
				}
			}
		}
	}
}

// ===============================
// ComputeService 特有的响应式适配
// ===============================

@media (max-width: 1024px) {
	.service-item {
		flex-direction: column !important;
		gap: 30px;
		margin-bottom: 20px;

		.service-image-placeholder {
			max-width: 100%;
			height: 300px;
		}

		.service-text {
			text-align: center;

			h3 {
				font-size: 1.8rem;
			}

			p {
				font-size: 1rem;
			}

			ul {
				text-align: left;
				max-width: 600px;
				margin: 0 auto;
			}
		}
	}
}

@media (max-width: 768px) {
	.service-item {
		gap: 25px;
		margin-bottom: 20px;
		padding: 30px 0;

		.service-image-placeholder {
			height: 250px;
		}

		.service-text {
			h3 {
				font-size: 1.5rem;
			}

			p {
				font-size: 0.95rem;
			}

			ul li {
				font-size: 0.9rem;
				padding: 10px 0 10px 25px;
			}
		}
	}
}

@media (max-width: 480px) {
	.service-item {
		gap: 20px;
		margin-bottom: 20px;
		padding: 20px 0;

		.service-image-placeholder {
			height: 200px;
		}

		.service-text {
			h3 {
				font-size: 1.3rem;
			}

			p {
				font-size: 0.9rem;
			}

			ul li {
				font-size: 0.85rem;
				padding: 8px 0 8px 20px;

				&:before {
					width: 4px;
					height: 4px;
				}
			}
		}
	}
}
